<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>   
<c:set var="ctx" value="${pageContext.request.contextPath }" ></c:set> 
<!doctype html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>头像</title>
    <link href="${ctx }/css/bootstrap.css" rel="stylesheet">
    <script type="text/javascript" src="${ctx }/js/jquery-1.11.1.js" ></script>
  <script src="${ctx }/js/bootstrap.js"></script>
  </head>
<body>
<script type="text/javascript">
        	function  changeView(){
        		$('#pp').tab('show');
        	}
        </script>
        <div class="panel-body" 
style="min-height: 500px;padding: 0px;margin: 0px;">

<div class="col-md-3" style="padding: 0px;
	margin-left: 0px;min-height: 500px;
	background-color: #f4f4f4;">
	<a href="#" class="list-group-item" 
		style="border-radius: 0px;">基本资料</a>
	<a href="#" class="list-group-item">详细资料</a>
	<a href="#" class="list-group-item">家庭资料</a>
	<a href="#" class="list-group-item active">头像修改</a>
</div>

<div class="col-md-7">
	<div class="col-md-12">
		<h4 class="page-head-line" 
			style="padding-bottom: 10px;margin-bottom: 10px;">
			头像修改
		</h4>
		
		<ul class="nav nav-tabs">
			<li class="active"><a href="#p1" data-toggle="tab">自定义头像</a></li>
			<li><a href="#p2" data-toggle="tab" id="pp">热门推荐头像</a></li>
		</ul>
		<div id="myTabContent" class="tab-content">
			<div class="tab-pane fade in active" id="p1">
				<form id="photoForm" enctype="multipart/form-data" method="post">
					<input type="file" name="photo" id="photo" 
						style="display: none;" accept="image/*"/>
					<input type="hidden" name="name" />	
					<div class="form-group" style="margin: 20px;">
						<label class="control-label">
							方法一:选择本地照片，上传编辑自己的头像
						</label>
						<br />
						<br />
						<button class="btn btn-info" style="width: 80px;" 
							onclick="selectPhoto()">
							选择头像
						</button>
						<font style="color: #ddd;font-size: 14px;">
							支持jpg、gif、png、bmp格式图片
						</font>
					</div>
					
				</form>
				<div class="form-group" style="margin: 40px 20px;">
					<label class="control-label">
						方法二:选择我们提供的头像，快速拥有优质头像
					</label>
					
					<br />
					<br />
					<div>
						<a href="javascript:void(0)">
							<img src="${ctx}/img/photo/000.jpg" 
								class="img-rounded test" 
								style="width: 45px;height: 45px;"/>&nbsp;
						</a>
						<a href="javascript:void(0)">
							<img src="${ctx}/img/photo/001.jpg" 
								class="img-rounded test" 
								style="width: 45px;height: 45px;"/>&nbsp;
						</a>
						<a href="javascript:void(0)">
							<img src="${ctx}/img/photo/002.jpg" 
								class="img-rounded test" 
								style="width: 45px;height: 45px;"/>&nbsp;
						</a>
						<a href="javascript:void(0)">
							<img src="${ctx}/img/photo/003.jpg" 
								class="img-rounded test" 
								style="width: 45px;height: 45px;"/>&nbsp;
						</a>
						<a href="javascript:void(0)" onclick="changeView()"
							style="background-color: #f4f4f4;
							width: 45px;height: 45px;color: #000;
							padding: 14px 7px;font-size: 8px;
							border-radius: 5px;float: right;">
							更多&gt;
						</a>
						
					</div>
				</div>
				
			</div>
			
			<div class="tab-pane" id="p2" style="padding: 10px;"> 
				<a href="javascript:void(0)">
					<img src="${ctx}/img/photo/000.jpg" 
						class="img-rounded"  
						style="width: 45px;height: 45px;"/>&nbsp;
				</a>
				<a href="javascript:void(0)">
					<img src="${ctx}/img/photo/001.jpg" 
						class="img-rounded" 
						style="width: 45px;height: 45px;"/>&nbsp;
				</a>
				<a href="javascript:void(0)">
					<img src="${ctx}/img/photo/002.jpg" 
						class="img-rounded" 
						style="width: 45px;height: 45px;"/>&nbsp;
				</a>
				<a href="javascript:void(0)">
					<img src="${ctx}/img/photo/003.jpg" 
						class="img-rounded" 
						style="width: 45px;height: 45px;"/>&nbsp;
				</a>
				<a href="javascript:void(0)">
					<img src="${ctx}/img/photo/004.jpg" 
						class="img-rounded" 
						style="width: 45px;height: 45px;"/>&nbsp;
				</a>
				<a href="javascript:void(0)">
					<img src="${ctx}/img/photo/005.jpg" 
						class="img-rounded" 
						style="width: 45px;height: 45px;"/>&nbsp;
				</a>
				<a href="javascript:void(0)">
					<img src="${ctx}/img/photo/006.jpg" 
						class="img-rounded" 
						style="width: 45px;height: 45px;"/>&nbsp;
				</a>
				<a href="javascript:void(0)">
					<img src="${ctx}/img/photo/007.jpg" 
						class="img-rounded" 
						style="width: 45px;height: 45px;"/>&nbsp;
				</a>
				<a href="javascript:void(0)">
					<img src="${ctx}/img/photo/008.jpg" 
						class="img-rounded" 
						style="width: 45px;height: 45px;"/>&nbsp;
				</a>
				
				<a href="javascript:void(0)">
					<img src="${ctx}/img/photo/009.jpg" 
						class="img-rounded" 
						style="width: 45px;height: 45px;"/>&nbsp;
				</a>
				<a href="javascript:void(0)">
					<img src="${ctx}/img/photo/010.jpg" 
						class="img-rounded" 
						style="width: 45px;height: 45px;"/>&nbsp;
				</a>
				<a href="javascript:void(0)">
					<img src="${ctx}/img/photo/011.jpg" 
						class="img-rounded" 
						style="width: 45px;height: 45px;"/>&nbsp;
				</a>
				<a href="javascript:void(0)">
					<img src="${ctx}/img/photo/012.jpg" 
						class="img-rounded" 
						style="width: 45px;height: 45px;"/>&nbsp;
				</a>
				<a href="javascript:void(0)">
					<img src="${ctx}/img/photo/013.jpg" 
						class="img-rounded" 
						style="width: 45px;height: 45px;"/>&nbsp;
				</a>
				<a href="javascript:void(0)">
					<img src="${ctx}/img/photo/014.jpg" 
						class="img-rounded" 
						style="width: 45px;height: 45px;"/>&nbsp;
				</a>
				<a href="javascript:void(0)">
					<img src="${ctx}/img/photo/015.jpg" 
						class="img-rounded" 
						style="width: 45px;height: 45px;"/>&nbsp;
				</a>
				<a href="javascript:void(0)">
					<img src="${ctx}/img/photo/016.jpg" 
						class="img-rounded" 
						style="width: 45px;height: 45px;"/>&nbsp;
				</a>
				<a href="javascript:void(0)">
					<img src="${ctx}/img/photo/017.jpg" 
						class="img-rounded" 
						style="width: 45px;height: 45px;"/>&nbsp;
				</a>
				<a href="javascript:void(0)">
					<img src="${ctx}/img/photo/018.jpg" 
						class="img-rounded" 
						style="width: 45px;height: 45px;"/>&nbsp;
				</a>
				<a href="javascript:void(0)">
					<img src="${ctx}/img/photo/019.jpg" 
						class="img-rounded" 
						style="width: 45px;height: 45px;"/>&nbsp;
				</a>
				
				<a href="javascript:void(0)">
					<img src="${ctx}/img/photo/020.jpg" 
						class="img-rounded" 
						style="width: 45px;height: 45px;"/>&nbsp;
				</a>
				<a href="javascript:void(0)">
					<img src="${ctx}/img/photo/021.jpg" 
						class="img-rounded" 
						style="width: 45px;height: 45px;"/>&nbsp;
				</a>
				<a href="javascript:void(0)">
					<img src="${ctx}/img/photo/022.jpg" 
						class="img-rounded" 
						style="width: 45px;height: 45px;"/>&nbsp;
				</a>
				<a href="javascript:void(0)">
					<img src="${ctx}/img/photo/023.jpg" 
						class="img-rounded" 
						style="width: 45px;height: 45px;"/>&nbsp;
				</a>
				<a href="javascript:void(0)">
					<img src="${ctx}/img/photo/024.jpg" 
						class="img-rounded" 
						style="width: 45px;height: 45px;"/>&nbsp;
				</a>
				<a href="javascript:void(0)">
					<img src="${ctx}/img/photo/025.jpg" 
						class="img-rounded" 
						style="width: 45px;height: 45px;"/>&nbsp;
				</a>
				<a href="javascript:void(0)">
					<img src="${ctx}/img/photo/026.jpg" 
						class="img-rounded" 
						style="width: 45px;height: 45px;"/>&nbsp;
				</a>
				<a href="javascript:void(0)">
					<img src="${ctx}/img/photo/027.jpg" 
						class="img-rounded" 
						style="width: 45px;height: 45px;"/>&nbsp;
				</a>
				<a href="javascript:void(0)">
					<img src="${ctx}/img/photo/028.jpg" 
						class="img-rounded" 
						style="width: 45px;height: 45px;"/>&nbsp;
				</a>
				<a href="javascript:void(0)">
					<img src="${ctx}/img/photo/029.jpg" 
						class="img-rounded" 
						style="width: 45px;height: 45px;"/>&nbsp;
				</a>
				<a href="javascript:void(0)">
					<img src="${ctx}/img/photo/030.jpg" 
						class="img-rounded" 
						style="width: 45px;height: 45px;"/>&nbsp;
				</a>
				
				<a href="javascript:void(0)">
					<img src="${ctx}/img/photo/031.jpg" 
						class="img-rounded" 
						style="width: 45px;height: 45px;"/>&nbsp;
				</a>
				<a href="javascript:void(0)">
					<img src="${ctx}/img/photo/032.jpg" 
						class="img-rounded" 
						style="width: 45px;height: 45px;"/>&nbsp;
				</a>
			</div>	
		</div>
		
		<button id="btn_upload" class="btn btn-primary" 
			disabled="disabled" onclick="uploadPhoto()"
			style="width: 100px;margin: 10px;">上传头像</button>
	</div>
</div>

<div class="col-md-2">
	
	<div style="border-left: 1px #ddd solid;
		height: 300px; margin-top: 110px;
		margin-left: -25px;
		padding: 20px 10px;">
		<label style="color: #000;font-size: 15px;">
			头像预览
		</label>
		<div id="pre1">
			<img id="phto1" src="${ctx}/img/photo/emtry.png"
				class="img-rounded" style="width: 100px;height: 100px;"/>
		</div>
		<label style="color: #ddd;font-size: 12px;">
			大头像100*100
		</label>
		<br />
		<br />	
		<div id="pre2">
			<img id="phto2" src="${ctx}/img/photo/emtry.png"
				class="img-rounded" style="width: 80px;height: 80px;"/>
		</div>
		<label style="color: #ddd;font-size: 11px;">
					小头像80*80
				</label>
			</div>
			
			
		</div>
		
	</div>
</body>
</html>